<!DOCTYPE html>
<html>
<head>
    <title>修改个人信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Minimal Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
    <!--<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />-->
    <!-- Custom Theme files -->
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <link href="css/font-awesome.css" rel="stylesheet">
    <script src="js/jquery.min.js"> </script>
    <script src="js/bootstrap.min.js"> </script>

    <!-- Mainly scripts -->
    <script src="js/jquery.metisMenu.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <link href="css/custom.css" rel="stylesheet">
    <script src="js/custom.js"></script>
    <script src="js/screenfull.js"></script>
    <script src="./js/jquery.min.js"> </script>
    <script src="./js/bootstrap.min.js"> </script>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/config.js"></script>
</head>
<body>
<div id="wrapper">
    <!----->
    <nav class="navbar-default navbar-static-top" role="navigation">
        <div class="navbar-header">
            <h1>
                <a class="navbar-brand" href="index.html">
                    <!-- 在这里添加logo图片 -->
                    <img class="logo-custom" src="images/img.png" alt="Logo" height="70">
                    <span class="pos-text">POS系统</span>
                </a>
            </h1>
        </div>
        <div class="drop-men" >
            <ul class=" nav_1">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle dropdown-at" data-toggle="dropdown"><span class=" name-caret">个人中心<i class="caret"></i></span>
                        <img src="images/wo.jpg"></a>
                    <ul class="dropdown-menu " role="menu">
                        <li><a href="profile.html"><i class="fa fa-user"></i>查看个人资料</a></li>
                        <li  type="button" @click="fetchUserInfo"><a href="EditProfile.html"><i class="fa fa-envelope"></i>修改个人信息</a></li>
                        <li><a href="login.html"><i class="fa fa-calendar"></i>注销</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
        <div class="clearfix">
        </div>
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">

                    <li>
                        <a href="index.html" class=" hvr-bounce-to-right"><i class="fa fa-dashboard nav_icon "></i><span class="nav-label">主页</span> </a>
                    </li>

                    <li>
                        <a href="#" class=" hvr-bounce-to-right"><i class="fa fa-indent nav_icon"></i> <span class="nav-label">基本信息</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="graphs.html" class=" hvr-bounce-to-right"> <i class="fa fa-area-chart nav_icon"></i>商品资料管理</a></li>

                            <li><a href="maps.html" class=" hvr-bounce-to-right"><i class="fa fa-map-marker nav_icon"></i>商品类别管理</a></li>

                            <li><a href="typography.html" class=" hvr-bounce-to-right"><i class="fa fa-file-text-o nav_icon"></i>客户资料管理</a></li>
                            <li><a href="typography.html" class="hvr-bounce-to-right"><i class="fa fa-truck nav_icon"></i>供应商资料管理</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class=" hvr-bounce-to-right"><i class="fa fa-desktop nav_icon"></i> <span class="nav-label">业务处理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="faq.html" class=" hvr-bounce-to-right"><i class="fa fa-question-circle nav_icon"></i>商品采购</a></li>
                            <li><a href="blank.html" class=" hvr-bounce-to-right"><i class="fa fa-file-o nav_icon"></i>商品销售</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="layout.html" class=" hvr-bounce-to-right"><i class="fa fa-th nav_icon"></i> <span class="nav-label">库存统计</span> </a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="content-main">

            <!--banner-->
            <div class="banner">
                <h2>
                    <a href="index.html">Home</a>
                    <i class="fa fa-angle-right"></i>
                    <span>Profile</span>
                </h2>
            </div>
            <!--//banner-->
            <!--gallery-->
            <div class=" profile" id="app">

                <div class="profile-bottom">
                    <h3><i class="fa fa-user"></i>Profile</h3>
                    <div class="profile-bottom-top">
                        <div class="col-md-4 profile-bottom-img">
                            <img :src="'http://localhost:8080/' + user.userAvatar"   id="profileImage">
                            <div class="text-center">
                                <label class="btn btn-primary" @click="triggerUpload">
                                    上传头像
                                </label>
                                <input type="file" id="uploadImage" @change="handleImageUpload" style="display: none;" accept="image/*">
                            </div>
                        </div>
                        <div class="col-md-8 profile-text">


                            <table>
                                <tr>
                                    <td>Username</td>
                                    <td> :</td>
                                    <td><input type="text" v-model="user.userName" placeholder="username"></td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td> :</td>
                                    <td><input type="email" v-model="user.userEmail" placeholder="email"></td>
                                </tr>
                                <tr>
                                    <td>手机号</td>
                                    <td> :</td>
                                    <td><input type="text" v-model="user.userPhone" placeholder="phone number"></td>
                                </tr>
                                <tr>
                                    <td>旧密码</td>
                                    <td> :</td>
                                    <td><input type="password" v-model="user.userPassword" placeholder="old password"></td>
                                </tr>
                                <tr>
                                    <td>新密码</td>
                                    <td> :</td>
                                    <td><input type="password" v-model="user.userNewPassword" placeholder="new password"></td>
                                </tr>
                                <tr>
                                    <td>身份 </td>
                                    <td>:</td>
                                    <td>{{ user.userRole == 1 ? '普通管理员' : '超级管理员' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="profile-bottom-bottom">
                        <div class="clearfix"></div>
                    </div>
                    <div class="profile-btn">
                        <button type="button" class="btn bg-red" @click="modifyInfo">
                            确认修改
                        </button>
                        <div class="clearfix"></div>
                    </div>


                </div>
            </div>
            <!--//gallery-->
            <!---->
        </div>
    </div>
    <div class="clearfix"> </div>
</div>

<!---->

<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示。

    new Vue({
        el: '#app',
        data: {
            user: {
                userName: '',
                userEmail: '',
                userPhone: '',
                userPassword: '',
                userNewPassword: '',
                userAvatar: ''
            },

            userId: '', // 顶层属性
            selectedFile: null, // 选中的文件
        },
        methods: {
            fetchUserInfo() {
                if (!this.userId) {
                    alert("用户ID未找到，请重新登录。");
                    return;
                }
                axios.post("/user/showInfo", { userId: this.userId })
                    .then(response => {
                        if(response.data.code === 200 && response.data.data) {
                            this.user = response.data.data;
                            console.log(this.user);
                            this.user.userPassword = ''; // 清空旧密码字段
                            this.user.userNewPassword = ''; // 清空新密码字段
                            this.profileImage = response.data.data.userAvatar; // 设置默认头像
                        } else {
                            alert("获取用户信息失败：" + response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error("请求失败：", error);
                        alert("请求用户信息时发生错误");
                    });
            },
            triggerUpload() {
                document.getElementById('uploadImage').click(); // 触发文件选择
            },
            handleImageUpload(event) {
                const file = event.target.files[0];
                if (!file) {
                    return;
                }
                if (!/\.(jpg|png|gif)$/i.test(file.name)) {
                    alert("请选择图片文件！");
                    return;
                }
                if (file.size > 2 * 1024 * 1024) {
                    alert("请选择小于2M的图片！");
                    return;
                }
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.profileImage = e.target.result; // 预览头像
                    this.user.userAvatar = e.target.result; // 将Base64编码设置到用户信息中
                };
                reader.readAsDataURL(file);
                this.selectedFile = file; // 保存选中的文件
            },
            modifyInfo() {
                // 检查用户信息是否完整
                if (this.user.userName === '' || this.user.userEmail === '' || this.user.userPhone === '' ||
                    this.user.userPassword === '') {
                    alert('请填写完整信息！');
                    return;
                }
                axios.post("/user/modifyInfo", this.user)
                    .then(response => {
                        if(response.data.code === 200) {
                            alert('个人信息修改成功');
                            window.location.href = './profile.html';
                        } else {
                            alert('修改失败：' + response.data.message);
                        }
                    })
                    .catch(error => {
                        console.error("请求失败：", error);
                        alert("请求修改信息时发生错误");
                    });
            }
        },
        mounted() {
            this.userId = localStorage.getItem('userId');
            if (this.userId) {
                this.fetchUserInfo();
            } else {
                alert("用户未登录或会话已过期。");
                // 可能需要重定向到登录页面
                // window.location.href = '/login.html';
            }
        }
    });
    </script>
</body>
</html>



